<template>
  <div class="ana-table">
    <div class="table">
      <n-data-table :columns="columns" :data="data" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  type: {
    required: true,
    type: String,
  },
  options: {
    required: true,
    type: Array,
  },
  values: {
    required: true,
    type: Array,
  },
  number: {
    required: true,
    type: Number,
  },
  options2: {
    type: Array,
    default: [],
  },
  data: {
    type: Array,
    default: [],
  },
});
const columns: any = computed(() => {
  if (props.type == 'all') {
    //一维表格
    return [
      {
        title: '选项',
        key: 'option',
      },
      {
        title: '选择人数',
        key: 'value',
      },
      {
        title: '比例',
        key: 'rate',
        sorter: (row1, row2) => row1.rate - row2.rate,
      },
    ];
  } else {
    //二维表格
    let array = [];
    array.push({
      title: '',
      key: 'option',
    });
    for (let i = 0; i < props.options2.length; i++) {
      array.push({
        title: props.options2[i],
        key: props.options2[i],
      });
    }
    return array;
  }
});

const data = computed(() => {
  if (props.type == 'all') {
    //一维表格
    let array = [];
    for (let i = 0; i < props.options.length; i++) {
      array.push({
        option: props.options[i],
        value: props.values[i],
        rate: ((Number(props.values[i]) / props.number) * 100).toFixed(2) + '%',
      });
    }
    return array;
  } else {
    //二维表格
    return props.data;
  }
});
</script>

<style scoped lang="scss">
.ana-line {
  height: 50vh;
  width: 50vw;
  div {
    height: 50vh;
    width: 50vw;
  }
}
</style>
